<script setup lang='ts'>
import { appRef } from '@/models/app.ref';

</script>
<template>
  <nav class="nav flex">
    <div class="open box flex-c" @click="appRef.isOpen = !appRef.isOpen">
      <icon-close class="icon" v-if="appRef.isOpen" />
      <icon-menu class="icon" v-else />
    </div>
    <Theme :show="true" class="open icon" :collapsed="false"></Theme>
  </nav>
</template>
<style lang='scss' scoped>
.nav {
  padding: 10px 20px 0;
  width: 100%;
  grid-column-gap: 10px;
  min-width: 250px;
  justify-content: space-between;

  .box {

    background: var(--color-neutral-2);
    padding: .75rem;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    justify-content: space-between;
  }

  .open {
    display: none;
  }

  .icon {
    font-size: 20px;
  }
}


@media screen and (max-width: 1000px) {
  .nav {
    .open {
      display: flex;
    }
  }
}
</style>